<template lang="">
  <div class="content">
    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未签订" name="first">
          <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
            <div class="left" style="float: left;">
              <el-select v-model="contractType" placeholder="请选择合同类型" clearable @input="contractNameInput()" clearable>
                <el-option label="销售合同" value="销售合同"></el-option>
                <el-option label="采购合同" value="采购合同"></el-option>
                <el-option label="合作协议" value="合作协议"></el-option>
              </el-select>
              <el-input suffix-icon="el-icon-search" placeholder="请输入合同名称" v-model="contractName"
                @input="contractNameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
              </el-input>
            </div>
            <div class="right" style="float: right;">
              <el-button @click="insert" type="danger" class="button" >创建合同</el-button>
            </div>
          </div>
          <div class="tabs">
            <ul
              style="border: 0px solid #000;list-style: none;padding: 0;display: flex;justify-content:flex-start ;flex-wrap:wrap;">
              <li class="nr" v-for="item in contractList"
                style="border: 0px solid #000;width: 460px;height:200px;background-color: #fff;border-radius: 10px;float: left;text-align: left;padding: 10px 20px;cursor: pointer;margin-bottom: 15px;margin-right: 15px;">
                <div class="bj" style="border:0px solid #000;float:right;">
                  <el-popconfirm @confirm="delContract(item.contractId)" confirm-button-text='删除'
                    cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除这个商机吗？">
                    <span class="cz" slot="reference">...</span>
                  </el-popconfirm>
                </div>
                <div class="nr" @click="Details(item)">
                  <h1 style="border: 0px solid #000;">{{item.contractName}}
                    <span v-if="item.contractType ==0" style="color:  #0060ff;">（销售合同）</span>
                    <span v-if="item.contractType ==1" style="color:  #0060ff;">（采购合同）</span>
                    <span v-if="item.contractType ==2" style="color:  #0060ff;">（合作协议）</span> <br>
                    <span
                      style="font-size: 16px;color:rgb(255, 136, 0);">{{(parseFloat(item.contractAmount)).toLocaleString('zh-CN',
                      { style: 'currency', currency:
                      'cny', currencyDisplay: 'symbol' })}}</span>
                  </h1>
                  <p style="color: #888;">
                    甲方：{{item.firstParty}}<br>乙方：{{item.secondParty}}<br>合同编号：{{item.contractNumber}}</p>
                  <p>
                    <el-progress :percentage="item.rate"></el-progress>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已签订" name="second">
          <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
            <div class="left" style="float: left;">
              <el-select v-model="contractType" clearable placeholder="请选择合同类型" @input="contractNameInput()" clearable>
                <el-option label="销售合同" value="0"></el-option>
                <el-option label="采购合同" value="1"></el-option>
                <el-option label="合作协议" value="2"></el-option>
              </el-select>
              <el-input suffix-icon="el-icon-search" placeholder="请输入内容" v-model="contractName"
                @input="contractNameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
              </el-input>
            </div>
            <div class="right" style="float: right;">
              <el-button @click="insert" type="danger" class="button">创建合同</el-button>
            </div>
          </div>
          <div class="tabs">
            <ul
              style="border: 0px solid #000;list-style: none;padding: 0;display: flex;justify-content:flex-start ;flex-wrap:wrap;">
              <li class="nr" v-for="item in contractList"
                style="border: 0px solid #000;width: 460px;height:200px;background-color: #fff;border-radius: 10px;float: left;text-align: left;padding: 10px 20px;cursor: pointer;margin-bottom: 15px;margin-right: 15px;">
                <div class="bj" style="border:0px solid #000;float:right;">
                  <el-popconfirm @confirm="delContract(item.contractId)" confirm-button-text='删除'
                    cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除这个商机吗？">
                    <span class="cz" slot="reference">...</span>
                  </el-popconfirm>
                </div>
                <div class="nr" @click="Details(item)">
                  <h1>{{item.contractName}}
                    <span v-if="item.contractType ==0" style="color:  #0060ff;">（销售合同）</span>
                    <span v-if="item.contractType ==1" style="color:  #0060ff;">（采购合同）</span>
                    <span v-if="item.contractType ==2" style="color:  #0060ff;">（合作协议）</span><br><span
                      style="font-size: 16px;color:rgb(255, 136, 0);">{{(parseFloat(item.contractAmount)).toLocaleString('zh-CN',
                      { style: 'currency', currency:
                      'cny', currencyDisplay: 'symbol' })}}</span>
                  </h1>
                  <p style="color: #888;">
                    甲方：{{item.firstParty}}<br>乙方：{{item.secondParty}}<br>合同编号：{{item.contractNumber}}</p>
                  <p>
                    <el-progress :percentage="item.rate"></el-progress>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="third">
          <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
            <div class="left" style="float: left;">
              <el-select v-model="contractType" clearable placeholder="请选择合同类型" @input="contractNameInput()" clearable>
                <el-option label="销售合同" value="0"></el-option>
                <el-option label="采购合同" value="1"></el-option>
                <el-option label="合作协议" value="2"></el-option>
              </el-select>
              <el-input suffix-icon="el-icon-search" placeholder="请输入内容" v-model="contractName"
                @input="contractNameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
              </el-input>
            </div>
            <div class="right" style="float: right;">
              <el-button @click="insert" type="danger" class="button">创建合同</el-button>
            </div>
          </div>
          <div class="tabs">
            <ul
              style="border: 0px solid #000;list-style: none;padding: 0;display: flex;justify-content:flex-start ;flex-wrap:wrap;">
              <li class="nr" v-for="item in contractList"
                style="border: 0px solid #000;width: 460px;height:200px;background-color: #fff;border-radius: 10px;float: left;text-align: left;padding: 10px 20px;cursor: pointer;margin-bottom: 15px;margin-right: 15px;">
                <div class="bj" style="border:0px solid #000;float:right;">
                  <el-popconfirm @confirm="delContract(item.contractId)" confirm-button-text='删除'
                    cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除这个商机吗？">
                    <span class="cz" slot="reference">...</span>
                  </el-popconfirm>
                </div>
                <div class="nr" @click="Details(item)">
                  <h1>{{item.contractName}}
                    <span v-if="item.contractType ==0" style="color:  #0060ff;">（销售合同）</span>
                    <span v-if="item.contractType ==1" style="color:  #0060ff;">（采购合同）</span>
                    <span v-if="item.contractType ==2" style="color:  #0060ff;">（合作协议）</span> <br><span
                      style="font-size: 16px;color:rgb(255, 136, 0);">{{(parseFloat(item.contractAmount)).toLocaleString('zh-CN',
                      { style: 'currency', currency:
                      'cny', currencyDisplay: 'symbol' })}}</span>
                  </h1>
                  <p style="color: #888;">
                    甲方：{{item.firstParty}}<br>乙方：{{item.secondParty}}<br>合同编号：{{item.contractNumber}}</p>
                  <p>
                    <el-progress :percentage="item.rate"></el-progress>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  export default {
    inject: ['reload'],
    data() {
      return {
        activeName: 'first',
        contractList: [],
        contractList1: [],
        contractList2: [],
        contractType: '',
        contractName: null,
        contractId: null,
        contractStatus: '0',
        current: 0,
        size: 100,
      };
    },
    mounted() {
      this.getContractList()
    },
    methods: {
      // 搜索
      contractNameInput() {
        this.getContractList()
      },
      // 获取合同列表
      async getContractList() {
        // 解构出参数
        const { current, size, contractStatus, contractName, contractId, contractType } = this;
        var data = {
          current: current,
          size: size,
          contractId: contractId,
          contractStatus: contractStatus,

        }
        if (contractType != '') {
          data.contractType = contractType
          // alert(data.contractName)
        } else if (contractName != '') {
          data.contractName = contractName
        }
        let result = await this.$API.agreement.reqContractList(data)
        this.total = result.data.total;
        this.contractList = result.data.data
      },
      // 删除销售机会
      async delContract(contractId) {
        // 解构出参数
        // const { salesProcessId} = this;
        var data = {
          contractId: contractId,
        }
        let result = await this.$API.agreement.reqDelContract(data);
        this.$message.success("删除成功！");
        this.reload();
        this.getContractList()
      },
      insert() {
        this.$router.push({
          path: '/insertAgreement',

        })
      },

      handleClick(tab, event) {
        console.log(tab, event);
        //reimburseStatus:0-待审批 1-审批通过 2-驳回 3-待提交
        if (tab.name == "first") {
          this.contractStatus = '0'
          this.getContractList()
        } else if (tab.name == "second") {
          this.contractStatus = '1'
          this.getContractList()
        } else if (tab.name == "third") {
          this.contractStatus = '2'
          this.getContractList()
        }
      },
      // 合同详情
      Details(vl) {
        const tolink = this.$router.push({
          path: '/agreementDetails',
          query: { contractId: vl.contractId, customId: vl.customId, secondRepresentative: vl.secondRepresentative }
        });
        window.open(tolink.href, '_self')
      },

    },

  };
</script>
<style scoped>
  @import "../../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
    /* -color: #fff; */
  }

  .main>>>.el-tabs__nav-wrap {
    border: 0px solid #000;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    border-bottom: none;
    height: 55px;
    padding-left: 40px;
  }

  .main>>>.el-tabs__nav {
    height: 55px;
  }

  .main>>>.el-tabs__item {
    padding: 5px 40px;
    font-size: 16px;
    color: #b6b6b6;
  }

  .main>>>.el-tabs__item:hover {
    color: #fe0100;
  }

  .main>>>.el-tabs__item.is-active {
    color: #fe0100;
  }

  .main>>>.el-tabs__active-bar {
    height: 3px;
    background-color: #fe0100;
  }

  .main>>>.el-tabs__nav-wrap::after {
    background-color: transparent;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }



  

  .cz {
    opacity: 0;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }

  .nr:hover .cz {
    opacity: 1;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }
</style>